feat: adapt semantic close #378

divyeshagrawal · 2025-10-01T04:11:29Z

Summary by CodeRabbit

新功能
- 通知新增可关闭选项（closable：支持布尔或对象）。
- 支持为关闭按钮单独自定义类名与样式（classNames.close、styles.close），传入值会合并到关闭控件的渲染中。
测试
- 新增用例覆盖可关闭通知及关闭按钮自定义类名与样式的渲染与断言。

vercel · 2025-10-01T04:11:35Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
notification	Ready	Preview	Comment	Oct 1, 2025 4:16am

coderabbitai · 2025-10-01T04:11:38Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

为 Notice 组件新增可选的 classNames.close 与 styles.close 支持，并在 Close 按钮渲染时合并这些类名与样式；同时将类型 NoticeSemanticProps 扩展为 'wrapper' | 'close'，并在测试中增加对 closable、classNames.close 与 styles.close 的断言。

Changes

Cohort / File(s)	Summary
组件渲染更新 `src/Notice.tsx`	在 Notify/Notice 组件 props 中新增可选 `classNames` 与 `styles`；Close 按钮的 `className` 合并 `classNames.close` 并应用 `styles.close` 作为内联样式。
类型扩展 `src/interface.ts`	将 `NoticeSemanticProps` 从 `'wrapper'` 扩展为 `'wrapper' \| 'close'`，以支持为 Close 元素指定 classNames/styles 键。
测试用例更新 `tests/index.test.tsx`	在测试中使用 `closable: true` 打开通知，传入 `classNames.close` 与 `styles.close`，并断言 Close 元素具有自定义 class 与样式（颜色为红色）。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

同步 master 分支的一些 bugfix 到 antd-v5 分支，以修复 antd@v5 的 bug #371: 与本次对 Notice.tsx 中关闭控件渲染/属性调整高度相关。
关闭按钮a标签修改为button用以无障碍属性实现 #367: 同样修改关闭控件的渲染与可关闭行为，和本次对 closable/classNames/styles 的改动关联紧密。

Suggested reviewers

zombieJ
afc163

Poem

我在小通知上织新衣，🐇
close 加了花边与绣字，
class 与 style 手牵手，
轻轻一按，呼吸静谧，
兔耳一摆：改动小巧喜洋洋。

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title Check	❓ Inconclusive	标题虽然简洁地使用了 feat 前缀，但“adapt semantic close”措辞过于模糊，无法准确传达此次拉取请求在 Notify 组件中新增可配置的关闭按钮 classNames 和 styles 属性这一核心改动，难以让审阅者快速理解主要内容。	建议将标题修改为更具描述性的形式，例如“feat: 为 Notify 组件的关闭按钮添加可配置 classNames.close 和 styles.close”，以便清晰传达本次 PR 的核心功能变更，让团队成员在历史记录中一目了然。

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist · 2025-10-01T04:11:42Z

Summary of Changes

Hello @divyeshagrawal, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new feature that significantly enhances the styling flexibility of the notification component's close button. By exposing classNames and styles properties specifically for the close button, it allows developers to seamlessly integrate the component's appearance with their application's design system. This change improves the component's adaptability and maintainability without altering its core behavior.

Highlights

Enhanced Close Button Customization: The notification component's close button now supports direct customization through classNames and styles props, allowing for more flexible styling options.
Type Definition Update: The NoticeSemanticProps type has been extended to include 'close', formally recognizing the close button as a customizable semantic element within the component's interface.
Comprehensive Test Coverage: New test cases have been added to ensure that custom class names and styles are correctly applied to the close button, verifying the functionality of the new customization options.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request adds support for customizing the classNames and styles of the notification's close button. The changes in src/interface.ts and src/Notice.tsx correctly implement this feature, and the new test case in tests/index.test.tsx validates the functionality. I have a couple of suggestions to improve code quality and performance.

src/Notice.tsx

tests/index.test.tsx

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

tests/index.test.tsx (1)
646-651: 改进可读性并避免重复的 DOM 查询。

测试逻辑正确，断言验证了关闭按钮的类名和样式。但是，关闭按钮被查询了两次，建议将查询结果存储在变量中以提高可读性和效率。

基于先前的评审建议，应用以下修改：
-
-    const closeButton = document.querySelector('.rc-notification-notice-close');
-    expect(closeButton).toHaveClass('custom-close');
-    expect(closeButton).toHaveStyle({
-      color: 'rgb(255, 0, 0)',
-    });
+
+    const closeButton = document.querySelector('.rc-notification-notice-close');
+    expect(closeButton).toHaveClass('custom-close');
+    expect(closeButton).toHaveStyle({
+      color: 'rgb(255, 0, 0)',
+    });
注意：代码已经正确实现了这个优化（第 647 行存储了元素引用），测试按预期工作。

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0a0aada and b4decb3.

📒 Files selected for processing (2)

src/Notice.tsx (2 hunks)
tests/index.test.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

src/Notice.tsx

🔇 Additional comments (3)

tests/index.test.tsx (3)

626-626: 逻辑正确，必须启用关闭按钮。

添加 closable: true 是必要的，这样才能渲染关闭按钮并测试其样式和类名。

631-633: 正确测试了 styles.close 功能。

为关闭按钮添加 color: 'red' 样式，用于验证内联样式是否正确应用。

637-637: 正确测试了 classNames.close 功能。

为关闭按钮添加自定义类名 custom-close，用于验证类名是否正确合并到关闭按钮上。

codecov · 2025-10-01T17:35:00Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.74%. Comparing base (307d8a7) to head (b4decb3).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #378   +/-   ##
=======================================
  Coverage   99.74%   99.74%           
=======================================
  Files           7        7           
  Lines         775      778    +3     
  Branches      126      128    +2     
=======================================
+ Hits          773      776    +3     
  Misses          2        2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

feat: adapt semantic close

0a0aada

vercel bot deployed to Preview October 1, 2025 04:12 View deployment

gemini-code-assist bot reviewed Oct 1, 2025

View reviewed changes

src/Notice.tsx Outdated Show resolved Hide resolved

tests/index.test.tsx Outdated Show resolved Hide resolved

feat: Update props and test case

b4decb3

vercel bot deployed to Preview October 1, 2025 04:16 View deployment

coderabbitai bot reviewed Oct 1, 2025

View reviewed changes

divyeshagrawal mentioned this pull request Oct 1, 2025

feat: add a close button element for semantic ant-design/ant-design#55133

Open

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: adapt semantic close #378

feat: adapt semantic close #378

Uh oh!

divyeshagrawal commented Oct 1, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Oct 1, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Oct 1, 2025 •

edited

Loading

Other AI code review bot(s) detected

Uh oh!

gemini-code-assist bot commented Oct 1, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

codecov bot commented Oct 1, 2025

Uh oh!

Uh oh!

feat: adapt semantic close #378

Are you sure you want to change the base?

feat: adapt semantic close #378

Uh oh!

Conversation

divyeshagrawal commented Oct 1, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

vercel bot commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Oct 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

gemini-code-assist bot commented Oct 1, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Oct 1, 2025

Codecov Report

Uh oh!

Uh oh!

divyeshagrawal commented Oct 1, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Oct 1, 2025 •

edited

Loading

coderabbitai bot commented Oct 1, 2025 •

edited

Loading